<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
        }
        li{
            width: 200px;
            height: 350px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 10px 30px;
        }
        li img{
            width: 180px;
            height: auto;
            margin: 9px;
        }
        li h2{
            font-size: 26px;
            line-height: 26px;
            text-align: center;
            margin-top: 10px;
        }
        li p{
            text-align: center;
            font-size: 14px;
            line-height: 14px;
            margin: 14px auto;
        }
        li p:nth-of-type(2) span{
            text-decoration: line-through;
        }
        li p:nth-of-type(3) span{
            color: red;
            font-weight: 900;
        }
        button{
            margin: 10px 30px;
        }
    </style>
</head>
<body>
    <button id='priceSort'>按价格排序</button>
    <button id='salesSort'>按销量排序</button>
    <button id='evaluateSort'>按好评排序</button>
    <ul id='list'>
        <!-- <li>
            <img src="./img/ip7.jpg" alt="">
            <h2>iphone7 plugs</h2>
            <p>颜色：<span>土豪金</span></p>
            <p>原价：<span>5899.00</span></p>
            <p>现价：<span>5888.00</span></p>
            <p>销量：<span>1230</span></p>
            <p>评价：<span>288</span></p>
        </li> -->
    </ul>

    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];


        // 封装
        function initial(){
            var res = '';
            for(var i=0;i<data.length;i++){
                res += '<li><img src="./' +  data[i].imgurl +  '" alt=""><h2>' +  data[i].name + '</h2><p>颜色：<span>' +  data[i].color + '</span></p><p>原价：<span>' +  data[i].price + '</span></p><p>现价：<span>' +  data[i].sale + '</span></p><p>销量：<span>' +  data[i].sales + '</span></p><p>评价：<span>' + data[i].evaluate + '</span></p></li>';
            }
            return res;
        }
        // 初始化
        list.innerHTML = initial();

        // 价格排序
        priceSort.onclick = function(){
            data.sort(function(a,b){
                return b.sale - a.sale;
            })
            list.innerHTML = initial();
        }

        // 销量排序
        salesSort.onclick = function(){
            data.sort(function(a,b){
                return b.sales - a.sales;
            })
            list.innerHTML = initial();
        }

        // 好评排序

        // 开关
        var isTrue = true;
        evaluateSort.onclick = function(){
            data.sort(function(a,b){
                if(isTrue){
                    return b.evaluate - a.evaluate;
                }else{
                    return a.evaluate - b.evaluate;
                }
                
            });
            isTrue = !isTrue;
            console.log(isTrue)
            list.innerHTML = initial();
        }
    </script>
</body>
</html>